<template>
	<view class="box-detail">
		<view class="item-index-top">
			<view class="item-top-text">基本信息</view>
		</view>
		<view class="box-detail-content">
			<view class="uni-form-item form-item date-pick-style">
				<view class="title">落地投资额</view>
				<input class="uni-input form-input" v-model="sendData.REAL_INVEST" name="input" placeholder="请输入落地投资额" disabled=""/>
				<view class="text-input-hou">( 万元 )</view>
			</view>
			<view class="uni-form-item form-item date-pick-style">
				<view class="title">协议税收强度</view>
				<input class="uni-input form-input bg-cyan" v-model="sendData.REAL_TAX" name="input" placeholder="请填写协议税收强度" disabled=""/>
				<view class="text-input-hou">( 万元/亩 )</view>
			</view>
			<view class="uni-form-item form-item date-pick-style">
				<view class="title">协议用地面积</view>
				<input class="uni-input form-input bg-cyan" v-model="sendData.REAL_SITE_AREA" name="input" placeholder="请填写协议用地面积" disabled=""/>
				<view class="text-input-hou">( 亩 )</view>
			</view>
		</view>
		
		<view class="item-index-top">
			<view class="item-top-text">产能情况</view>
		</view>
		<view class="box-detail-content">
			<view class="uni-form-item form-item date-pick-style">
				<view class="title">设计产能</view>
				<input class="uni-input form-input" v-model="sendData.EXPECT_OUT" name="input" placeholder="请输入设计产能"/>
			</view>
			<view class="uni-form-item form-item date-pick-style">
				<view class="title">实际产能</view>
				<input class="uni-input form-input bg-cyan" v-model="sendData.REAL_OUT" name="input" placeholder="请输入实际产能" />
			</view>
			<view class="uni-form-item form-item date-pick-style">
				<view class="title">产能单位</view>
				<input class="uni-input form-input bg-cyan" v-model="sendData.OUT_UNIT" name="input" placeholder="请输入产能单位" />
			</view>
		</view>
		
		<view class="item-index-top">
			<view class="item-top-text">项目投产</view>
		</view>
		<view class="box-detail-content">
			<view class="uni-form-item form-item date-pick-style">
				<view class="title">管理人员数量</view>
				<input class="uni-input form-input" v-model="sendData.MANAGER_COUNT" name="input" placeholder="请输入管理人员数量"/>
			</view>
			<view class="uni-form-item form-item date-pick-style">
				<view class="title">研发人员数量</view>
				<input class="uni-input form-input bg-cyan" v-model="sendData.DEVELOPER_COUNT" name="input" placeholder="请输入研发人员数量" />
			</view>
			<view class="uni-form-item form-item date-pick-style">
				<view class="title">生产人员数量</view>
				<input class="uni-input form-input bg-cyan" v-model="sendData.PRODUCER_COUNT" name="input" placeholder="请输入生产人员数量" />
			</view>
			<view class="uni-form-item form-item date-pick-style">
				<view class="title">启动时间</view>
				<uni-datetime-picker class="form-picker" type="date" :value="sendData.PRODUCE_TIME" start="2000-2-31" end="3050-12-30" @change="dateChange"></uni-datetime-picker>
				<image src="../../../../static/images/icon_calendar.png" mode=""></image>
			</view>
			<view class="uni-form-item form-item ">
				<view class="title">设备入厂与调试情况</view>
				<textarea class="uni-input form-input bg-cyan" v-model="sendData.EQUIPMENT" name="input" placeholder="请输入设备入厂与调试情况" />
			</view>
			<view class="uni-form-item form-item ">
				<view class="title">投产备注</view>
				<textarea class="uni-input form-input bg-cyan" v-model="sendData.PRODUCE_REMARK" name="input" placeholder="请输入投产备注" />
			</view>
			
		</view>
		
		<view class="box-attach">
			<view class="box-attach-title">附件</view>
			<view class="box-attach-row">
				<view class="box-attach-icon" >
					<image src="../../../../static/images/icon_enclosure.png" mode=""></image>
				</view>
				<text class="box-attach-name" @click="uploadFiles()">点击上传</text>
			</view>
			<view class="box-attach-row"  v-for="item,index in fileListData" :key="index">
				<view class="box-attach-icon" >
					<image src="../../../../static/images/icon_enclosure.png" mode=""></image>
				</view>
				<view class="box-attach-name">{{ item.fileShowName||"无"}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				code:'',
				fileListData:[],
				newFileList:[],
				sendData:{
					EXPECT_OUT:'',//设计产能
					OUT_UNIT:'',//产能单位
					REAL_OUT:'',//实际产能
					
					MANAGER_COUNT:'',//管理人员数量
					DEVELOPER_COUNT:'',//研发人员数量
					PRODUCER_COUNT:'',//生产人员数量
					EQUIPMENT:'',//设备入厂与调试情况
					PRODUCE_REMARK:'',//投产备注
					PRODUCE_TIME: '',//项目启动时间
					
					REAL_INVEST:'',//落地投资额
					REAL_TAX:'',//协议税收强度
					REAL_SITE_AREA:'',//协议用地面积

				}
			}
		},
		props: {
			pageData: {
				type: Object,
				default(){
					return {}
				}
			}
		},
		watch:{
			pageData(){
				console.log(this.pageData,"this.pageData")
				if(this.pageData.fileList['PPP_T_BUS_PROJ.XGFJ']&&this.pageData.fileList['PPP_T_BUS_PROJ.XGFJ'].fileList.length){
					this.fileListData=this.pageData.fileList['PPP_T_BUS_PROJ.XGFJ'].fileList
				}
				this.sendData={
					EXPECT_OUT:this.pageData.model.EXPECT_OUT,//设计产能
					OUT_UNIT:this.pageData.model.OUT_UNIT,//产能单位
					REAL_OUT:this.pageData.model.REAL_OUT,//实际产能
					
					MANAGER_COUNT:this.pageData.model.MANAGER_COUNT,//管理人员数量
					DEVELOPER_COUNT:this.pageData.model.DEVELOPER_COUNT,//研发人员数量
					PRODUCER_COUNT:this.pageData.model.PRODUCER_COUNT,//生产人员数量
					EQUIPMENT:this.pageData.model.EQUIPMENT,//设备入厂与调试情况
					PRODUCE_REMARK:this.pageData.model.PRODUCE_REMARK,//投产备注
					PRODUCE_TIME: this.pageData.model.PRODUCE_TIME,//项目启动时间
					
					REAL_INVEST:this.pageData.model.REAL_INVEST,//落地投资额
					REAL_TAX:this.pageData.model.REAL_TAX,//协议税收强度
					REAL_SITE_AREA:this.pageData.model.REAL_SITE_AREA,//协议用地面积
				}
			},
		},
		methods:{
			dateChange(e) {
				this.date = e
				this.sendData.PRODUCE_TIME=e 
			},
			//上传
			uploadFiles(){
				this.$util.upload('_XGFJ','PPP_T_BUS_PROJ.XGFJ',(data)=>{
					if(data){
						this.newFileList=data
						this.fileListData.push({
							...data[0],fileShowName:data[0].name
						})
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.wrap{
		padding-bottom: 60rpx;
	}
	page{
		padding-bottom: 20rpx;
	}
	.box-detail {
		background-color: #ffffff;
		border-radius: 20rpx;
		margin: 20rpx;
		padding: 26rpx 30rpx 50rpx 30rpx;
	}
	.item-index-top{
		// width: 650rpx;
		height: 40rpx;
		// margin: 20rpx 20rpx 18rpx 20rpx;
		background-color: #0099cc;
		border-radius: 10rpx;
		.item-top-text{
			font-family: AlibabaPuHuiTi-Regular;
			padding-left: 20rpx;
			font-size: 26rpx;
			font-weight: normal;
			line-height: 40rpx;
			letter-spacing: 0px;
			color: #ffffff;
		}
	}
	.textarea-style{
		// height:156rpx ;
	}
	.border-bot{
		border-bottom: 1px solid #e8f0f2;
	}
	.border-width{
		border-bottom: 3rpx solid #e8f0f2;
	}

	.box-detail-content {
		padding: 0 10rpx;
		margin-top: 24rpx;

		&.border {
			border-bottom: 1px solid #e8f0f2;
		}
	}

	.box-detail-content-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.row-title {
			font-size: 26rpx;
			color: #9a9a9a;
			text-align: left;
			flex-shrink: 0;
			width: 120rpx;
			margin-right: 10rpx;

			&.mag {
				margin-left: 18rpx;
			}
		}

		.row-content {
			font-size: 26rpx;
			color: #414a5d;
			word-wrap: break-word;
			word-break: break-all;
			flex: 1;
			text-align: right;

			&.mag {
				margin-right: 18rpx;
			}
		}
	}

	.bar-contact {
		background-color: #0099cc;
		border-radius: 10px;
		height: 40rpx;
		line-height: 40rpx;
		padding-left: 18rpx;
		color: #FFFFFF;
		font-size: 24rpx;

	}
	.box-attach-style{
		display: flex;
		padding: 0 10rpx;
	}
	.box-attach{
		margin-top: 20rpx;
		padding: 20rpx 10rpx 0 10rpx;
		border-top: 1px solid #e8f0f2;
	
		.box-attach-title{
			width: 170rpx;
			font-size: 26rpx;
			color: #9a9a9a;
			text-align: left;
			flex-shrink: 0;
			margin-right: 10rpx;
		}
		.box-attach-row {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			// align-items: center;
			// padding: 0 18rpx;
			// height: 38rpx;
			margin: 10rpx 0;
			.box-attach-icon {
				width: 34rpx;
				height:40rpx;
				margin-right: 20rpx;
				// background-image: url(../../../../static/images/icon_enclosure.png);
				// box-sizing: 34rpx 40rpx;
				// background-repeat: no-repeat;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.box-attach-name {
				word-wrap: break-word;
				word-break: break-all;
				white-space: pre-line;
				flex: 1;
				font-size: 26rpx;
				color: #0099cc;
			}
		}
	}

	.fixed-action-bar {
		width: 100%;
		display: flex;
		height: 70rpx;
		align-items: center;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;

		.item {
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;

		}

		.icon {
			width: 30rpx;
		}

		.btn-box {
			width: 90rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 70rpx;
		}

		.text-edit {
			font-size: 24rpx;
			color: #0099cc;
			line-height: 70rpx;
		}

		.text-delete {
			font-size: 24rpx;
			color: #cc3357;
			line-height: 70rpx;
		}
		
	}
	.uni-form-item{
		display: flex;
		justify-content: flex-start;
		margin-bottom: 20rpx;
	}
	
	.uni-input{
		font-size: 26rpx;
		color: #808080;
		// border-bottom:1px solid #dce4e6;
		flex:1;
	}
	.title{
		width: 170rpx;
		flex-shrink: 0;
		font-size: 26rpx;
		color: #414a5d;
	}
	
	.form-picker {
		width: 250rpx;
	}
    /deep/.uni-datetime-picker-timebox{
		font-size: 26rpx;
		color: #808080;
		border:0; 
		border-radius: 0; 
		padding: 0;
	}

	.date-pick-style{
		justify-content: flex-start;
		align-items: center;
		image{
			width:36rpx;
			height: 32rpx;
		}
		.text-input-hou{
			font-size: 26rpx;
			padding: 0 100rpx 0 20rpx;
		}
	}
	
	
	.checkbox-group-style{
		display: flex;
	}
	.checkbox{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-right: 20rpx;
		color:#808080 ;
		// <image src="../../../../static/images/icon_checkbox_01.png" mode=""></image>
		.image-box{
			width: 30rpx;
			height: 30rpx;
			margin-right: 12rpx;
			background-image:url("../../../../static/images/icon_checkbox_02.png");
			background-size: 100% 100%; 
		}
	}
	.selectBox{
		color: #0099cc;
		.image-box{
			width: 30rpx;
			height: 30rpx;
			margin-right: 12rpx;
			background-image:url("../../../../static/images/icon_checkbox_01.png");
			background-size: 100% 100%; 
		}
		
	}
	/deep/.form-input-min{
		width: 300rpx;
	}
	.form-input-line{
		color: #808080;
		padding: 0 12rpx;
	}
	
	.uni-textarea{
		height: 78rpx;
	}
	
	.picker-box {
		height: 200px;
		text-align: center;
	}
	.main-box {
		width: 100%;
		.main-content {
			background-color: #fff;
			.title-box {
				display: flex;
				justify-content: space-around;
				.title-txt {
					
				}
			}
		}
		
	}
	.popup-content {
		width: 680rpx;
		background-color: #fff;
		padding: 20rpx;
	
		.content-title {
			text-align: center;
			font-size: 30rpx;
		}
	
		.content-name {
			padding: 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.name-left{
			font-size:28rpx;
			color: #333;
		}
		.name-right{
			font-size: 28rpx;
			color: #999;
		}
		.checkbox-title{
			width: 620rpx;
			font-size:28rpx;
			color: #333;
		}
		.check_group-style{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			.selectBoxes{
			  background: #0099cc !important;
			  color: #fff!important;
			}
			.checkboxes{
				height: 60rpx;
				padding: 10rpx 80rpx;
				border: 1px solid  #0099cc;
				margin: 20rpx;
				border-radius: 7rpx;
				color: #000;
			}
			
			
		}
		.check-box {
			width: 620rpx;
			padding: 40rpx;
		}
	
		.btn-grow {
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.surebtn{
				color: #0099cc;
			}
		}
	
		
	}
</style>
